<template>
  <div class="ltd-header">
    <div class="ltd-title">
      <el-image
        class="header-title"
        :src="props.page ==='/' ? titlewhite : titleblack"
        alt="好好住"
      ></el-image>
    </div>
    <div class="ltd-menu">
      <ltd-menu :menus="menus" :page="props.page"></ltd-menu>
    </div>
    <div class="function">
      <el-button type="primary" size="large">登录</el-button>
    </div>
    <div class="awatar"></div>
  </div>
</template>
<script lang="ts" setup>
import titlewhite from '@/assets/title-white.png'
import titleblack from '@/assets/title-black.png'
import LtdMenu from './LtdMenu.vue'

const props = defineProps<{
  page: string
}>()
const menus = [
  {index: '/', text: '首页'},
  {index: 'discovery', text: '发现'},
  {index: 'example', text: '整屋案例'},
  {index: 'design', text: '设计师入住'},
  {index: 'brand', text: '品牌入驻'},
]
</script>
<style scoped>
.ltd-header{
  margin: 10px 0;
}

.ltd-title{
  height: 60px;
}
.ltd-title > .header-title{
  height: 40px;
  padding: 10px;
}
.ltd-header,
.ltd-title {
  display: flex;
  justify-content: center;
}
.ltd-menu{
  margin-left: 10%;
}
.function{
  height: 60px;
  line-height: 60px;
  margin-left: 5%;
}
.function:deep(.el-button){
  width: 100px;
  font-size: var(--ltd-font-size-primary);
  border: 1px solid var(--ltd-button-bg-color);
  background-color: var(--ltd-button-bg-color);
}
</style>